<template>
	<div>
		<a @click="$router.back(-1)" class="btn btn-primary" type="button" style="width: 100px;">返回</a>
		<div class="input-group" style="margin-top: 10px;">
			<label class="input-group-prepend input-group-text" for="basic-addon1">一级分类</label>
			<input type="text" class="form-control" id="basic-addon1" v-model="newL1">
			<div class="input-group-append">
				<button class="btn btn-primary" type="button" @click="addL1()">提交一级分类</button>
			</div>
		</div>

		<div class="input-group" style="margin-top: 10px;">
			<label class="input-group-prepend input-group-text" for="basic-addon2">二级分类</label>
			<select @change="queryL1()" v-model="bookCode1" class="custom-select" id="inputGroupSelect01"
				style="width: 280px;">
				<option selected value="-1">选择类别</option>
				<option v-for="bookClazz in bookL2" :key="bookClazz.classificationId" :value="bookClazz.classCode">
					{{bookClazz.classificationName}}
				</option>
			</select>
			<input type="text" class="form-control" id="basic-addon2" v-model="newL2">
			<div class="input-group-append">
				<button class="btn btn-primary" type="button" @click="addL2()">提交二级分类</button>
			</div>
		</div>

		<div class="input-group" style="margin-top: 10px;">
			<label class="input-group-prepend input-group-text" for="basic-addon2">三级分类</label>
			<select @change="queryL2()" v-model="bookCode2" class="custom-select" id="inputGroupSelect02"
				style="width: 280px;">
				<option selected value="-1">选择类别</option>
				<option v-for="bookClazz in bookL31" :key="bookClazz.classificationId" :value="bookClazz.classCode">
					{{bookClazz.classificationName}}
				</option>
			</select>
			<select @change="" v-model="bookCode3" class="custom-select" id="inputGroupSelect03" style="width: 280px;">
				<option selected value="-1">选择类别</option>
				<option v-for="bookClazz in bookL32" :key="bookClazz.classificationId" :value="bookClazz.classCode">
					{{bookClazz.classificationName}}
				</option>
			</select>
			<input type="text" class="form-control" id="basic-addon2" v-model="newL3">
			<div class="input-group-append">
				<button class="btn btn-primary" type="button" @click="addL3()">提交三级分类</button>
			</div>
		</div>


	</div>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted,
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		useStore,
	} from "vuex";
	import axios from "axios";

	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			const store = useStore();
			store.state.ifFrameShow = false;
			//onMounted()生命周期
			onMounted(() => {
				axios
					.get("Admin")
					.then((response) => (data.bookL1 = response.data.data))
					.catch((error) => {
						console.log(error)
						if (error.status === 403) {
							alert("权限不足")
							router.push({
								name: 'Main'
							})
						}

					});
				data.queryL1()
			});
			const data = reactive({
				newL1: '测试L1',
				newL2: '测试L1L2',
				newL3: '测试L3',
				bookL2: [],
				bookL31: [],
				bookL32: [],
				bookCode1: -1,
				bookCode2: -1,
				bookCode3: -1,
				addL1: () => {
					if (data.newL1 == '') {
						alert("请输入一级分类")
						return
					}
					axios
						.post("Admin/AddClassL1", {
							newL1: data.newL1
						})
						.then((response) => {
							alert(response.data.msg)
							data.queryL1()
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				addL2: () => {
					if (data.newL2 == '') {
						alert("请输入二级分类")
						return
					}
					if (data.bookCode1 == '-1' || data.bookCode1 == '01') {
						alert("请选择分类")
						return
					}
					axios
						.post("Admin/AddClassL2", {
							newL2: data.newL2,
							bookCode: data.bookCode1
						})
						.then((response) => {
							alert(response.data.msg)
							data.queryL1()
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				addL3: () => {
					if (data.newL3 == '') {
						alert("请输入三级分类")
						return
					}
					if (data.bookCode3 == '-1') {
						alert("请选择分类")
						return
					}
					axios
						.post("Admin/AddClassL3", {
							newL3: data.newL3,
							bookCode: data.bookCode3
						})
						.then((response) => {
							alert(response.data.msg)
							data.queryL1()
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},

				/////////////////////////////////////////////////////////
				queryL1: () => {
					axios
						.get("QueryL1")
						.then((response) => {
							data.bookCode2 = -1
							data.bookL2 = response.data.data
							data.bookL31 = response.data.data
						})
						.catch((error) => console.log(error));
				},




				queryL2: () => {
					axios
						.get("QueryL2", {
							params: {
								L1: data.bookCode2
							}
						})
						.then((response) => {
							data.bookCode3 = -1
							data.bookL32 = response.data.data

						})
						.catch((error) => console.log(error));
				},
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>


<style>

</style>
